<template>
  <img ref="__img__" :class="[className,animationType]" :style="{width:width,height:height}" :src="src || defaultImg" alt="" @click="handleClick($event,src)">
</template>

<script>
export default {
  name: 'ImgAnimation',
  props: {
    type: {
      type: [String, Number],
      default: 3
    },
    className: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      defaultImg: 'http://img3.imgtn.bdimg.com/it/u=903200623,184497686&fm=15&gp=0.jpg',
      animationType: 'songshu-animation-image',
      types: ['songshu-animation-image-clipRectSpIn', 'songshu-animation-image-clipCircleIn', 'songshu-animation-image-clipTriangleIn', 'songshu-animation-image']
    }
  },
  watch: { // 触发动画
    src(old, new_) {
      this.animationType = this.types[this.type * 1]
      if (this.$refs['__img__'].classList.contains(this.animationType)) {
        this.$refs['__img__'].classList.remove(this.animationType)
        requestAnimationFrame(() => {
          this.$refs['__img__'].classList.add(this.animationType)
        })
      } else {
        this.$refs['__img__'].classList.add(this.animationType)
      }
    }
  },
  mounted() {
    this.animationType = this.types[this.type * 1]
  },
  mounted() {},
  methods: {
    handleClick(e, src) {
      console.log('点击：handleClick事件 ')
      this.$emit('handleClick', e, src)
    }
  }
}

</script>
<style lang='scss' scoped>
    @keyframes seed {
        0% {
            --seed: 0
        }
        1% {
            --seed: 1
        }
        2% {
            --seed: 2
        }
        3% {
            --seed: 3
        }
        4% {
            --seed: 4
        }
        5% {
            --seed: 5
        }
        6% {
            --seed: 6
        }
        7% {
            --seed: 7
        }
        8% {
            --seed: 8
        }
        9% {
            --seed: 9
        }
        10% {
            --seed: 10
        }
        11% {
            --seed: 11
        }
        12% {
            --seed: 12
        }
        13% {
            --seed: 13
        }
        14% {
            --seed: 14
        }
        15% {
            --seed: 15
        }
        16% {
            --seed: 16
        }
        17% {
            --seed: 17
        }
        18% {
            --seed: 18
        }
        19% {
            --seed: 19
        }
        20% {
            --seed: 20
        }
        21% {
            --seed: 21
        }
        22% {
            --seed: 22
        }
        23% {
            --seed: 23
        }
        24% {
            --seed: 24
        }
        25% {
            --seed: 25
        }
        26% {
            --seed: 26
        }
        27% {
            --seed: 27
        }
        28% {
            --seed: 28
        }
        29% {
            --seed: 29
        }
        30% {
            --seed: 30
        }
        31% {
            --seed: 31
        }
        32% {
            --seed: 32
        }
        33% {
            --seed: 33
        }
        34% {
            --seed: 34
        }
        35% {
            --seed: 35
        }
        36% {
            --seed: 36
        }
        37% {
            --seed: 37
        }
        38% {
            --seed: 38
        }
        39% {
            --seed: 39
        }
        40% {
            --seed: 40
        }
        41% {
            --seed: 41
        }
        42% {
            --seed: 42
        }
        43% {
            --seed: 43
        }
        44% {
            --seed: 44
        }
        45% {
            --seed: 45
        }
        46% {
            --seed: 46
        }
        47% {
            --seed: 47
        }
        48% {
            --seed: 48
        }
        49% {
            --seed: 49
        }
        50% {
            --seed: 50
        }
        51% {
            --seed: 51
        }
        52% {
            --seed: 52
        }
        53% {
            --seed: 53
        }
        54% {
            --seed: 54
        }
        55% {
            --seed: 55
        }
        56% {
            --seed: 56
        }
        57% {
            --seed: 57
        }
        58% {
            --seed: 58
        }
        59% {
            --seed: 59
        }
        60% {
            --seed: 60
        }
        61% {
            --seed: 61
        }
        62% {
            --seed: 62
        }
        63% {
            --seed: 63
        }
        64% {
            --seed: 64
        }
        65% {
            --seed: 65
        }
        66% {
            --seed: 66
        }
        67% {
            --seed: 67
        }
        68% {
            --seed: 68
        }
        69% {
            --seed: 69
        }
        70% {
            --seed: 70
        }
        71% {
            --seed: 71
        }
        72% {
            --seed: 72
        }
        73% {
            --seed: 73
        }
        74% {
            --seed: 74
        }
        75% {
            --seed: 75
        }
        76% {
            --seed: 76
        }
        77% {
            --seed: 77
        }
        78% {
            --seed: 78
        }
        79% {
            --seed: 79
        }
        80% {
            --seed: 80
        }
        81% {
            --seed: 81
        }
        82% {
            --seed: 82
        }
        83% {
            --seed: 83
        }
        84% {
            --seed: 84
        }
        85% {
            --seed: 85
        }
        86% {
            --seed: 86
        }
        87% {
            --seed: 87
        }
        88% {
            --seed: 88
        }
        89% {
            --seed: 89
        }
        90% {
            --seed: 90
        }
        91% {
            --seed: 91
        }
        92% {
            --seed: 92
        }
        93% {
            --seed: 93
        }
        94% {
            --seed: 94
        }
        95% {
            --seed: 95
        }
        96% {
            --seed: 96
        }
        97% {
            --seed: 97
        }
        98% {
            --seed: 98
        }
        99% {
            --seed: 99
        }
        100% {
            --seed: 100
        }
    }
    // 小圆
    .songshu-animation-image {
        // -webkit-mask: linear-gradient(135deg, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
        // -webkit-mask-size: 40px 40px;
        // mask: linear-gradient(135deg, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
        // mask-size: 40px 40px;
        // animation: seed .6s;
         mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 40px 40px;
    animation: seed 1s;
    }

    .songshu-animation-image-clipTriangleIn {
    animation: clipTriangleIn .6s;
}
@keyframes clipTriangleIn {
    0%   {
        clip-path: polygon(50% 50%, 49% 51%, 51% 51%);
    }
    100% {
        clip-path: polygon(50% -100%, -100% 150%, 200% 150%);
    }
}

.songshu-animation-image-clipCircleIn {
    animation: clipCircleIn .6s;
}
@keyframes clipCircleIn {
    0%   {
        clip-path: circle(0 at 50% 50%);
    }
    100% {
        clip-path: circle(200px at 50% 50%);
    }
}

.songshu-animation-image-clipRectSpIn {
    animation: clipRectSpIn .6s;
}
@keyframes clipRectSpIn {
    0%   {
        clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
    }
    100% {
        clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
    }
}
</style>
